// lib
var $ = require("jquery");
var mui = require("mui");
require("muiCss");

// self global
require("commonJs");
require("commonCss");
// require("../css/category.scss");
require("../css/category.scss");
require('../css/icons-extra.css')

$(function () {
  var category_selected = $('#categoryControl');
  var chooseVal = $('.mui-control-item .mui-active');
  category_selected.on("tap", ".mui-control-item", function () {
    var arrowup = $(this).children().hasClass('mui-icon-arrowup')
    if (arrowup) {
      $(this).children().removeClass('mui-icon-arrowup').addClass('mui-icon-arrowdown')
    } else {
      $(this).children().removeClass('mui-icon-arrowdown').addClass('mui-icon-arrowup')
    }

    console.log($(this).text().trim())
    //如果是筛选，底部选中取消，弹出窗口
    if ($(this).text().trim() == '筛选') {
      mui(".mui-off-canvas-wrap").offCanvas().toggle();
      $('.normal-aside').hide()
      $('.search-aside').show()
    }
  })

  var headerAsideIcon = $(".header-aside-icon");
  headerAsideIcon.on("tap", function () {
    $('.search-aside').hide()
    $('.normal-aside').show()
  });

  /**
   * js 底部增加样式
   */
  // $('.footer-tab-item').eq(3).addClass('mui-active')

  /**
   * 选择分类
   */
  var popover = $("#popover");
  var chooseResult = $(".search-choose-result");
  popover.on("tap", ".mui-table-view-cell", function () {
    chooseResult.text($(this).text()).data("key", $(this).data("key"));
    // mui("#popover").popover("toggle");
  });

  /**
   * 选择详细关键字、类型、年限
   */
  var chooseListWrap = $(".choose-list-wrap");
  var cName = "choose-active";
  $(".cn-radio").hide();
  $(".en-radio").hide();
  chooseListWrap.find('.choose-list').each(function () {
    if ($(this).hasClass(cName)) {
      $(this).append('<span class="search-chahao"></span>');
      $(this).append(
        '<input type="hidden" value="' +
        $(this).attr("value") +
        '" name="' +
        $(this).attr("name") +
        '" />'
      );
    }
  });
  /**
   * 根据选择筛选
   */
  chooseListWrap.on("tap", ".choose-list", function (e) {
    /** 如果点击的是已选中项目或者是叉号，return false */
    if ($(this).hasClass(cName) || e.target !== e.currentTarget) {
      return false;
    }

    console.log("radio", $(this).data("radio"))
    /** 选中纯英文，中文选项消失，反之同理 */
    if ($(this).parent().hasClass("radio-wrap")) {
      switch ($(this).data("radio")) {
        case "cn":
          $(".cn-radio").show();
          $(".en-radio").hide();
          $(".en-radio").find('.search-chahao').remove();
          $(".en-radio").find('.choose-list').removeClass(cName);
          $(".en-radio").find('input').remove();
          break;
        case "en":
          $(".en-radio").show();
          $(".cn-radio").hide();
          $(".cn-radio").find('.search-chahao').remove();
          $(".cn-radio").find('.choose-list').removeClass(cName);
          $(".cn-radio").find('input').remove();
          break;
        case "pic":
          $(".en-radio").hide();
          $(".cn-radio").hide();
          $(".cn-radio").find('.search-chahao').remove();
          $(".cn-radio").find('.choose-list').removeClass(cName);
          $(".cn-radio").find('input').remove();
          break;
        case "num":
          $(".en-radio").hide();
          $(".cn-radio").hide();
          $(".cn-radio").find('.search-chahao').remove();
          $(".cn-radio").find('.choose-list').removeClass(cName);
          $(".cn-radio").find('input').remove();
          break;
        default:
          $(".cn-radio").show();
          $(".en-radio").show();
      }
    }
    /** 单选 多选同时存在 */
    /** 点击的是多选按钮 */
    if ($(this).hasClass("checkbox")) {
      $(this)
        .parent()
        .children()
        .each(function () {
          /** 遍历，兄弟元素不是多选的，则移除class及叉号 */
          if (!$(this).hasClass("checkbox")) {
            $(this).removeClass(cName).find(".search-chahao").remove();
            $(this).find('input').remove()
          }
        });
    } else {
      /** 默认单选，移除所有兄弟元素class及叉号 */
      $(this).parent().children().removeClass(cName).find(".search-chahao").remove();
      $(this).parent().children().find('input').remove()
    }

    /** 给自身增加class及叉号 */
    $(this).addClass(cName);
    $(this).append('<span class="search-chahao"></span>');
    $(this).append(
      '<input type="hidden" value="' +
      $(this).attr("value") +
      '" name="' +
      $(this).attr("name") +
      '" />'
    );
  })

  /** 点击叉号 */
  chooseListWrap.on("tap", ".search-chahao", function (e) {
    if (e.target !== e.currentTarget) {
      return false;
    }
    $(this).parent().removeClass(cName);
    $(this).parent().find('input').remove()
    $(this).remove();
  })

  var clear_search = $('#search-clear');
  clear_search.on('tap', function(){
    // console.log(cName)
    var sel_item = $('.choose-list')
    sel_item.removeClass('choose-active')
  })

  var search_submit = $('#search-submit')
  search_submit.on('tap', function(){
    var result = {};
    $(".choose-active").each(function () {
      console.log($(this).text().trim())

      $(this).text().trim()

      
    });
    console.log(result)
  })


  /**
   * 清空选项 确认搜索
   */
  // var resetBtn = $(".search-btn-clear");
  // var searchBtn = $(".search-btn-search");
  // resetBtn.on("tap", function () {
  //   chooseListWrap
  //     .find("." + cName)
  //     .removeClass(cName)
  //     .find(".search-chahao")
  //     .remove();
  // });
  // searchBtn.on("tap", function () {
  //   var result = {};
  //   $(".choose-active").each(function () {
  //     if ($(this).parent().parent().parent().is(":visible")) {
  //       var key = $(this).data("key");
  //       var name = $(this).parent().parent().prev().data("name");
  //       result[name] = key
  //     }
  //   });
  //   // console.log(result)
  // });

  //点击商标列表
  // var goods_list = $('.item_goods');
  // goods_list.on('tap', function() {
  //     var indexNum = goods_list.index(this);
  //     console.log(indexNum)
  //     // mui.alert(indexNum.toString(), 'Hello MUI', function() {
  //     // info.innerText = '你刚关闭了警告框';
  //     // });
  // })


  // 2020 - 11 - 10 --> 增加群组筛选
  var baseUrl = 'https://www.ht.cn/index-getqunzu.html'
  var selectCate = $('#select-cate')
  var groupBox = $('.group-checked-box')
  var checkedGroupMap = {}
  selectCate.on('change', function() {
    var cate = selectCate.val()
    if (cate != '0') {
      getGroupDom(cate)
    }
  })
  function getGroupDom(cate) {
    var checked = checkedGroupMap[cate] ? checkedGroupMap[cate].join(',') : `${cate}01`
    var getGroupUrl = `${baseUrl}?cate=${cate}&checked=${checked}&is_ajax=1`
    $.ajax({
      url: getGroupUrl,
      success: function(res) {
        var domStr = ''
        for (var i = 0; i < res.data.length; i++) {
          var data = res.data[i]
          domStr += `<div class="mui-input-row mui-checkbox mui-left">
              <label>【${data.group_id}】${data.title}</label>
              <input name="25group[]" value="${data.group_id}" type="checkbox">
          </div>`
        }
        groupBox.empty().append(domStr)
      }
    })
  }
  getGroupDom(1)
});
